<template>
  <div class="data-container">
    <div class="data-filesOperator">
      <div class="top">
        <!-- 左边操作栏 -->
        <div class="left">
          <el-upload
            class="uploadButton"
            :action="ip + 'uploadData'"
            name="multipartFile"
            :data="currentFilePath"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-error="onError"
            :on-progress="onProgress"
            :before-upload="beforeUpload"
          >
            <el-button type="primary" size="small" class="upload">
              <font-awesome-icon
                icon="cloud-arrow-up"
                style="margin-right: 5px"
              />
              Upload</el-button
            >
          </el-upload>
          <el-button
            size="small"
            class="common-btn"
            style="background: rgb(255, 95, 149); color: white"
            @click="deleteFile"
          >
            <font-awesome-icon icon="trash" style="margin-right: 5px" />
            Delete</el-button
          >
          <el-button
            type="primary"
            size="small"
            class="common-btn"
            @click="newFolder"
          >
            <font-awesome-icon icon="plus" style="margin-right: 5px" />
            New Fold</el-button
          >
          <el-button size="small" class="common-btn" @click="folderBack">
            <font-awesome-icon icon="rotate-left" />
          </el-button>
          <el-button
            size="small"
            class="common-btn"
            @click="this.getDataTree(this.currentFilePath)"
          >
            <font-awesome-icon icon="rotate" />
          </el-button>
        </div>
        <!-- 右边操作栏 -->
        <div class="right">
          <font-awesome-icon
            class="font-awesome-i"
            icon="arrow-down-short-wide"
          />
          <!-- TODO 文件排序 -->
          <!-- <div class="sortType">
          <el-popover
            width="120"
            trigger="hover"
            :visible-arrow="true"
            popper-class="sortPopover"
          >
            <div
              :class="sortType == 1 ? 'sortTypeItemChecked' : 'sortTypeItem'"
              @click="sortFile(1)"
            >
              <i class="fa-solid fa-check"></i>
              按文件名称排序
            </div>
            <div
              :class="sortType == 2 ? 'sortTypeItemChecked' : 'sortTypeItem'"
              @click="sortFile(2)"
            >
              <i class="fa-solid fa-check"></i>
              按修改时间排序
            </div>
            <div
              :class="sortType == 3 ? 'sortTypeItemChecked' : 'sortTypeItem'"
              @click="sortFile(3)"
            >
              <i class="fa-solid fa-check"></i>
              按文件大小排序
            </div>
            <font-awesome-icon
              class="font-awesome-i"
              icon="arrow-down-short-wide"
            />
          </el-popover>
        </div> -->
        </div>
      </div>

      <!-- 当前路径 -->
      <div class="down">
        <span>{{ currentFilePath.dataPath.split("workspace")[1] }}</span>
      </div>
    </div>
    <div class="data-filesContent">
      <div class="fileList-title">
        <div class="title"><span>Name</span></div>
        <div class="time">Modify Time</div>
        <div class="size">Size</div>
      </div>
      <!-- 新建文件夹 -->
      <div class="fileList-item newfolder" v-show="showNewfolderTemplate">
        <div class="title">
          <div class="imgContainer">
            <img src="filesImg/folder.png" alt="" />
          </div>
          <input
            id="newFolderName"
            type="text"
            class="renameInput"
            v-model="newFolderName"
            style="cursor: auto"
            @change="folderRename('old')"
            @keyup.enter="folderRenameEnter()"
          />
        </div>
        <div class="time">
          <span>-</span>
        </div>
        <div class="size">
          <span>-</span>
        </div>
      </div>
      <!-- 列表循环 -->
      <div class="file-list">
        <div
          v-for="(file, index) in filesTree"
          :key="index"
          @dblclick="openFolder(file)"
          @click="fileChecked(index)"
          :class="
            checkedFileIndex.includes(index)
              ? 'fileList-item-checked'
              : 'fileList-item'
          "
        >
          <div class="title">
            <font-awesome-icon class="font-awesome-i" icon="square-check" />
            <div class="imgContainer">
              <img :src="'filesImg/' + file.fileType + '.png'" alt="" />
            </div>

            <input
              type="text"
              v-model="file.fileName"
              class="renameInput"
              :id="'input' + index"
              :disabled="true"
            />
          </div>
          <div class="time">
            <span class="no-select">{{ dateFormate(file.updateTime) }}</span>
          </div>
          <div class="size">
            <span class="no-select">{{ sizeFormat(file.fileSize) }}</span>
          </div>
        </div>
      </div>

      <!-- 文件上传进度展示 -->
      <div
        id="progressContainer"
        class="progressContainer"
        v-show="showProcess"
      >
        <div class="title">
          <span>{{ uploadFile.name }}</span>
        </div>
        <div class="progressItem">
          <!-- 上传进度条 -->
          上传进度:
          <el-progress
            :percentage="uploadFile.progress"
            color="#696bcc"
            style="font-size: 12px"
          ></el-progress>
        </div>
        <div class="tips">tips: 上传过程中,请不要离开该页面哦!</div>
      </div>
    </div>
  </div>
</template>
<script>
import { config } from "../ModelingComponents/Config.js";
import axios from "axios";
export default {
  props: {
    message: { type: String },
  },
  data() {
    return {
      ip: config.httpIP,
      data: [],
      timeOut: null, //控制双击不触发单击事件
      checkedFileIndex: [], //当前选中文件的索引
      currentFilePath: {
        dataPath: "E:\\DockerContainer\\",
      }, //当前路径
      filesTree: [
        {
          absolutePath: "",
          childrenFileList: [],
          fileName: "测试文件夹",
          filePath: "\\7085456f-19a4-4f60-98ef-08f43d860620\\测试文件夹",
          fileSize: null,
          fileType: "folder",
          updateTime: null,
        },
        {
          absolutePath: "",
          childrenFileList: [],
          fileName: "测试图片.png",
          filePath: "\\7085456f-19a4-4f60-98ef-08f43d860620\\测试图片.png",
          fileSize: 919054,
          fileType: "image",
          updateTime: "2022-11-22T06:35:19.371+00:00",
        },
      ], //目录树
      curFilesTree: [], //当前目录树
      rootPath: "", //根目录
      uploadFile: {
        name: "testFile",
        progress: 50,
      }, //上传文件信息
      showProcess: false,
      searchFiled: [], //搜索的文件
      showNewfolderTemplate: false, //显示新建文件夹卡片
      newFolderName: "新建文件夹", //新文件夹名字
      renameFilebtnClickTag: false, //重命名按钮点击标记
      sortType: 1, //1 按名称排序，2 按修改时间排序，3 按大小排序
      sortOrder: 1, //1 从小打到，-1从大到小
      displayType: 1, //1 图标，2 详细列表
      // 文件搜索框输入内容
      searchContent: "",
    };
  },
  methods: {
    // 上传成功
    onSuccess(response, file) {
      // console.log(response);

      if (response == "success") {
        this.$message.success("文件上传成功!");
        this.getDataTree(this.currentFilePath);
        console.log(this.currentFilePath);

        // this.isUploadProgressShow = false;
      } else {
        this.$message.error("上传失败,请稍后重试!");
      }
    },

    // 上传失败
    onError(err, file) {
      this.$message.error("上传失败,请稍后重试!");
      // console.log(err);
    },

    // 文件上传时
    onProgress(e, file) {
      this.uploadFile.progress = parseInt(e.percent); // 动态获取文件上传进度

      if (this.uploadFile.progress == 100) {
        setTimeout(() => {
          this.showProcess = false;
          this.uploadFile.progress = 0;
        }, 1000); // 一秒后关闭进度条
      }
    },

    // 文件上传之前
    beforeUpload(file) {
      this.showProcess = true;
      this.uploadFile.name = file.name;
    },
    getDataTree() {
      const _this = this;
      console.log("当前路径", this.currentFilePath.dataPath);

      axios
        .post(config.serverIP + "getCurDirFiles", {
          path: this.currentFilePath.dataPath,
        })
        .then((resp) => {
          // console.log(resp.data);
          _this.filesTree = resp.data;
        });
    },
    // 打开文件夹
    openFolder(file) {
      // clearTimeout(this.timeOut);
      if (file.fileType == "folder") {
        this.currentFilePath.dataPath = file.filePath;
        this.getDataTree(this.currentFilePath);
      } else {
        this.$emit("openFile", file.filePath, file.fileType);
        console.log(file);
      }
    },
    // 返回上一级
    folderBack() {
      if (this.currentFilePath.dataPath == this.rootPath) {
        return;
      }
      var currentFoldPath = this.currentFilePath.dataPath;
      var n = currentFoldPath.lastIndexOf("\\");
      if (n <= 0) {
        return;
      }
      console.log("返回上一级");
      this.currentFilePath.dataPath = currentFoldPath.slice(0, n);
      this.getDataTree(this.currentFilePath);
    },
    // 选中文件
    fileChecked(index) {
      // // 1.鼠标选中样式控制
      // if (this.renameFilebtnClickTag) {
      //   //禁止点击输入框取消选中
      //   return;
      // }
      let arrayIndex = this.checkedFileIndex.indexOf(index);
      if (arrayIndex > -1) {
        this.checkedFileIndex.splice(arrayIndex, 1);
      } else {
        this.checkedFileIndex.push(index);
      }
    },
    deleteFile() {
      const _this = this;
      var files = new Array();
      for (let i = 0; i < this.checkedFileIndex.length; i++) {
        const elFileIndex = this.checkedFileIndex[i];
        files.push(this.filesTree[elFileIndex]);
      }
      axios.post(config.serverIP + "deleteFiles", files).then((res) => {
        if (res.data == "success") {
          _this.checkedFileIndex.splice(0, _this.checkedFileIndex.length);
          _this.getDataTree(_this.currentFilePath);
          this.$message.success("文件删除成功!");
        }
      });
    },
    // 新建文件夹点击
    newFolder() {
      // 激活输入框
      this.showNewfolderTemplate = true;
      setTimeout(() => {
        var input = document.getElementById("newFolderName");
        input.disabled = false;
        input.focus();
      }, 66);
    },
    folderRenameEnter() {
      const _this = this;
      var input = document.getElementById("newFolderName");

      // 新建文件夹
      axios
        .post(config.serverIP + "newFolder", {
          path: this.currentFilePath.dataPath + "\\" + this.newFolderName,
        })
        .then((resp) => {
          if (resp.data == "success") {
            // 更新目录树
            _this.getDataTree();
            _this.showNewfolderTemplate = false;
            _this.newFolderName = "新建文件夹";
            input.disabled = true;
          } else {
            _this.$message.error("新建文件夹失败!");
          }
        });
    },
    folderRename(type) {
      console.log(type);
    },
    // 时间格式化
    dateFormate(dateIn) {
      if (dateIn == null || dateIn == "") {
        return "-";
      }
      let date = new Date(dateIn);
      let Mon = date.getMonth() + 1;
      let year = date.getFullYear();
      let day = date.getDate();
      let Hour = date.getHours();
      let mm = date.getMinutes();
      return year + "/" + Mon + "/" + day + " " + Hour + ":" + mm;
    },
    //文件大小格式化
    sizeFormat(oriSize) {
      if (oriSize == null || oriSize == "") {
        return "-";
      }
      return (oriSize / 1024).toFixed(2) + " KB";
    },
  },
  mounted() {
    const _this = this;
    setTimeout(() => {
      this.currentFilePath.dataPath += this.message + "\\workspace";
      this.rootPath = this.currentFilePath.dataPath;
      this.getDataTree(); // 1秒后执行检查方法
    }, 500);
  },
  watch: {
    // message: {
    //   change(newValue, oldValue) {
    //     console.log(newValue, oldValue);
    //     this.getDataTree();
    //   },
    // },
  },
};
</script>
<style lang="less" scoped>
.data-container {
  widows: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}
.data-filesOperator {
  width: 100%;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.data-filesOperator .top {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data-filesOperator .down {
  width: 100%;
  display: flex;
  height: 22px;
  padding-left: 15px;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  color: #5f6477;
}
.data-filesOperator .top .left {
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 8px;
  transition: 0.3s;
}
.data-filesOperator .top .left .uploadButton {
  margin-right: 10px;
  border-radius: 5px;
  height: fit-content;
  display: flex;
  align-items: center;
}
.data-filesOperator .top .right {
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.right .sortType {
  height: 100%;
  margin: 0px 10px;
  cursor: pointer;
}
.right .sortType .font-awesome-i {
  font-size: 20px;
  color: rgba(66, 66, 66, 0.6);
}
.sortTypeItem {
  font-size: 14px;
  position: relative;
  padding: 5px 0px;
  padding-left: 5px;
  border-radius: 6px;
  cursor: pointer;
}
.sortTypeItem .font-awesome-i {
  color: white;
}
.sortTypeItemChecked {
  font-size: 14px;
  position: relative;
  cursor: pointer;
  padding: 5px 0px;
  padding-left: 5px;
  border-radius: 6px;
  color: rgb(20, 121, 215);
  font-weight: 600;
}

.sortTypeItem:hover {
  background-color: #f1f3f8;
}
.sortTypeItemChecked:hover {
  background-color: #f1f3f8;
}
.data-filesContent {
  width: 100%;
  height: calc(100% - 42px);
  // background-color: red;
}
.data-filesContent .file-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.data-filesContent .progressContainer {
  position: absolute;
  width: 280px;
  padding: 5px 5px;
  right: 5px;
  bottom: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s ease;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  background-color: #fff;
}
.data-filesContent .progressContainer .progressItem {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-left: 10px;
  color: rgb(82, 82, 82);
}
.progressContainer .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 5px;
}
.progressContainer .title span {
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  margin-left: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.progressContainer .el-progress {
  margin-left: 8px;
  flex: 1;
}
.progressContainer /deep/ .el-progress__text {
  font-size: 12px;
}
.progressContainer .tips {
  color: rgb(177, 177, 177);
  font-size: 8px;
  margin-left: 10px;
}
.data-filesContent .fileList-title {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  color: #818999;
  font-size: 13px;
  font-weight: 600px;
  padding-left: 6px;
}
.data-filesContent .title {
  width: 50%;
  display: flex;
  align-items: center;
}
.data-filesContent .time {
  width: 30%;
}
.data-filesContent .size {
  width: 20%;
}
.data-filesContent .title span {
  margin-left: 20px;
}
.data-filesContent .title .imgContainer {
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 5px;
  margin-left: 15px;
}
.data-filesContent .title .imgContainer img {
  max-height: 100%;
  max-width: 100%;
  user-select: none;
}
.data-filesContent .title .renameInput {
  width: 100%;
  border: none;
  font-size: 12px;

  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* 标准语法 */
}
.data-filesContent .fileList-item {
  width: 100%;
  display: flex;
  align-items: center;
  color: #818999;
  font-size: 13px;
  font-weight: 600px;
  margin-bottom: 10px;
  padding-left: 6px;
  cursor: pointer;
}
.data-filesContent .fileList-item .font-awesome-i {
  display: none;
}
.data-filesContent .fileList-item-checked {
  width: 100%;
  display: flex;
  align-items: center;
  color: #818999;
  font-size: 13px;
  font-weight: 600px;
  margin-bottom: 10px;
  padding-left: 6px;
  background-color: rgba(64, 158, 255, 0.1);
  cursor: pointer;
}
.data-filesContent .fileList-item-checked .font-awesome-i {
  color: rgb(64, 158, 255);
}
.data-filesContent .fileList-item-checked .imgContainer {
  margin-left: 4px;
}
.sortType {
  margin: 0px 10px;
  cursor: pointer;
}
.sortType i {
  font-size: 20px;
  color: rgba(66, 66, 66, 0.6);
}
.sortTypeItem {
  font-size: 14px;
  position: relative;
  padding: 5px 0px;
  padding-left: 5px;
  border-radius: 6px;
  cursor: pointer;
}
.sortTypeItem i {
  color: white;
}
.sortTypeItemChecked {
  font-size: 14px;
  position: relative;
  cursor: pointer;
  padding: 5px 0px;
  padding-left: 5px;
  border-radius: 6px;
  color: rgb(20, 121, 215);
  font-weight: 600;
}

.sortTypeItem:hover {
  background-color: #f1f3f8;
}
.sortTypeItemChecked:hover {
  background-color: #f1f3f8;
}
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* 标准语法 */
}
</style>